<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-isLatest="{scope}">
				<span v-if="scope.row.isLatest == 1">
					是
				</span>
				<span v-else>否</span>
			</template>

			<template #table-column-os="{scope}">
				<span v-if="scope.row.os == 0">iOS</span>
				<span v-else-if="scope.row.os == 1">Android</span>
			</template>

			<template #table-column-url="{scope}">
				<a :href="scope.row.url" target="_blank">{{ scope.row.url }}</a>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import platform from '@/mixin/platform';
import { osType } from '@/dict/index';

export default {
	data() {
		return {
			crud: null,
			options: []
		};
	},
	mixins: [platform],
	methods: {
		tests() {
			alert(233);
		},
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.appVersion.versionList)
				.set('dict', {
					label: {
						add: '添加应用版本'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: '产品名称',
							prop: 'name',
							align: 'center'
						},
						{
							label: '平台类型',
							prop: 'os',
							align: 'center'
						},
						{
							label: '版本号',
							prop: 'version',
							align: 'center'
						},
						{
							label: '下载地址',
							prop: 'url',
							align: 'center'
						},
						{
							label: '是否最新版',
							prop: 'isLatest',
							align: 'center'
						},
						{
							label: '更新描述',
							prop: 'updateContent',
							align: 'center'
						}
					],

					op: {
						layout: ['edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '90px',
						center: true,
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: '产品名称',
							prop: 'name',
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入产品名称'
								}
							},
							rules: {
								required: true,
								message: '请输入产品名称'
							}
						},
						{
							label: '平台类型',
							prop: 'os',
							span: 8,
							component: {
								name: 'el-select',
								props: {
									placeholder: '请选择平台类型'
								},
								options: osType
							},
							rules: {
								required: true,
								message: '请选择平台类型'
							}
						},
						{
							label: '版本号',
							prop: 'version',
							span: 12,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入版本号'
								}
							},
							rules: {
								required: true,
								message: '请输入版本号'
							}
						},
						{
							prop: 'url',
							label: '上传应用',
							span: 24,
							component: {
								name: 'cl-upload'
							}
						},
						{
							label: '是否最新版',
							prop: 'isLatest',
							value: true,
							component: {
								name: 'el-switch'
							}
						},
						{
							label: '更新描述',
							prop: 'updateContent',
							span: 20,
							component: {
								name: 'el-input',
								attrs: {
									type: 'textarea',
									placeholder: '请输入更新描述'
								}
							},
							rules: {
								required: true,
								message: '请输入更新描述'
							}
						}
					]
				})
				.on('open', async (isEdit, data) => {
					if (isEdit) {
						this.crud.setForm('isLatest', data.isLatest == 1 ? true : false);
					}
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						let isLatest = data.isLatest ? '1' : '0';
						delete data.isLatest;
						next({
							...data,
							isLatest
						});
					} else {
						let isLatest = data.isLatest ? '1' : '0';
						delete data.isLatest;
						next({
							...data,
							isLatest
						});
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>

<style lang="stylus" scoped>
.sales-top {
	color: red;
}

.sales-bottom {
	color: green;
}
</style>

<style lang="stylus"></style>
